<template>
  <div class="content">
    <div
      class="addShopBox"
      @click="addShopLinkClick"
      v-if="orderType === 'shop'"
    >
      <p>添加商品</p>
    </div>
    <div class="seekBox" v-if="orderType === 'shop' || orderType === 'stock'">
      <i-icon class="searchIcon" type="search" size="18" color="#999" />
      <input
        confirm-type="search"
        @confirm="seekClick"
        :placeholder="placeholder"
        v-model="findInputValue"
        class="findInput"
      />
    </div>
    <i-tabs
      :current="activeType"
      color="#ef250b"
      @change="handleTabChange"
      v-if="orderType === 'stock'"
    >
      <i-tab v-for="(item,index) in transType" :key="index" :title="item.name"></i-tab>
    </i-tabs>
    <scroll-view
      class="scroll-wrap"
      :class="orderType === 'stock' || orderType === 'shop' ? 'template1' : 'template2'"
      scroll-y
      @scrolltolower="handleLoadMore"
    >
      <div class="wu"></div>
      <div class="list" v-for="(item,index) in orderList" :key="index">
        <div class="margin" @click="findStockGoodsInfoLinkClick(item)">
          <img
            :src="orderType !== 'type' ? item.goodsImage || item.goodsImg : item.goodsImg"
            mode="scaleToFill"
          />
          <div class="right">
            <div class="stock" v-if="orderType === 'stock'">
              <div>
                <p class="ellipsis-2">收货人：{{item.addressContact}}</p>
                <span>{{orderState[item.state]}}</span>
              </div>
              <p>下单时间：{{item.orderDate}}</p>
              <p>赊货锁额：{{item.lockAmount}}</p>
            </div>
            <div
              class="shop"
              v-else-if="orderType === 'shop' || orderType === 'check'"
            >
              <p class="shopName ellipsis">{{item.goodsName}}</p>
              <div>
                <span>{{item.stockSupplyCost}}</span>
                <i-icon type="enter" size="18" color="#999" />
              </div>
              <!-- <p>库存：{{item.stockSupplyNum}}</p> -->
              <p class="num">库存：{{item.goodsNum || item.goodsStock}}</p>
            </div>
            <div class="type" v-else>
              <p class="shopName ellipsis-2">{{item.goodsName}}</p>
              <p class="num">库存：{{item.goodsStock}}</p>
              <div>
                <span>{{item.goodsDiscount}}</span>
                <p>加入市场</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
    </scroll-view>
  </div>
</template>

<script>
import {
  FIND_STOCK_ORDER_PAGE_API,
  FIND_SHOP_GOODS_PAGE,
  FIND_STOCK_GOODS_PAGE
} from '@/api'
import { getCurrentPageParams, currencyFormatter } from '@/utils'

export default {
  components: {},
  props: {},
  data () {
    return {
      params: {},
      findInputValue: '',
      currentPage: 1,
      alreadyLastPage: false,
      list: [],
      activeType: '0',
      state: '',
      transType: [
        { key: '0', name: '全部', state: '' },
        { key: '1', name: '待发货', state: '1' },
        { key: '2', name: '已收货', state: '3,7' },
        { key: '3', name: '退款', state: '4,5,8' }
      ],
      orderState: {
        '0': '待付款',
        '1': '待收货',
        '2': '已取消',
        '3': '已收货',
        '4': '待退货',
        '5': '已退货',
        // '6': '用户删除订单',
        '7': '已评价',
        '8': '拒绝退货'
      },
      orderType: '',
      placeholder: '请输入商品名称'
    }
  },
  computed: {
    account () {
      // return this.$cookie.get('account')
      return this.$store.state.account
    },
    orderList () {
      return this.list.map(_ => ({
        ..._,
        lockAmount: currencyFormatter(_.lockAmount),
        stockSupplyCost: currencyFormatter(_.stockSupplyCost),
        goodsDiscount: currencyFormatter(_.goodsDiscount)
      }))
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.activeType = '0'
    this.findInputValue = ''
    this.$cookie.remove('setAdderss')
    this.init()
    this.orderTypeInit()
  },
  methods: {
    addShopLinkClick () {
      this.$router.push('/pages/data-analyze/stock/supply/shop/type/main')
    },
    seekClick () {
      const vm = this
      if (!vm.findInputValue.length) {
        vm.$toast('还未输入要搜索信息')
      }
      vm.init()
      vm.placeholder = '请输入订单号/手机号'
      vm._findShopList()
    },
    handleTabChange (e) {
      this.activeType = e.target.key
      this.init()
      this.placeholder = '请输入订单号/手机号'
      this.transType.forEach(_ => {
        if (this.activeType === _.key) {
          this.state = _.state
          this._findShopList()
        }
      })
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._findShopList()
      }
    },
    findStockGoodsInfoLinkClick (item) {
      const vm = this
      if (vm.orderType === 'stock') {
        vm.$router.push(
          `/pages/data-analyze/stock/supply/order/info/main?orderNo=${
            item.orderNo
          }`
        )
      } else if (vm.orderType !== 'type') {
        vm.$router.push(
          `/pages/data-analyze/stock/supply/shop/info/main?orderNo=${
            item.orderNo
          }&orderType=${vm.orderType}&goodsNo=${item.goodsNo}`
        )
      } else {
        vm.$router.push(
          `/pages/data-analyze/stock/supply/shop/info/main?goodsNo=${
            item.goodsNo
          }&orderType=${vm.orderType}`
        )
      }
    },
    findLogisticsClick (item) {
      this.$router.push(
        `/pages/data-analyze/stock/my/logistics/main?orderNo=${item.orderNo}`
      )
    },
    init () {
      const vm = this
      vm.state = ''
      vm.currentPage = 1
      vm.alreadyLastPage = false
      vm.list = []
      vm.placeholder = '请输入商品名称'
    },
    orderTypeInit () {
      const vm = this
      vm.params = {
        shopId: vm.account.shopId,
        isStock: '1'
      }
      let title = '订单'
      vm.orderType = getCurrentPageParams('type')
      if (vm.orderType === 'shop') {
        vm.params.isStock = '1'
      } else if (vm.orderType === 'check') {
        title = '商品审核'
        vm.params.isStock = '0'
      } else if (vm.orderType === 'stock') {
        title = '进货订单'
        vm.params.isStock = '1'
        vm.placeholder = '请输入订单号/手机号'
      } else if (vm.orderType === 'type') {
        title = getCurrentPageParams('goodsTypeName')
        vm.params.isStock = '1'
      } else {
        title = '我的进货'
        vm.params.isStock = '1'
      }
      wx.setNavigationBarTitle({
        title
      })
      vm._findShopList()
    },
    /** api **/
    _findShopList () {
      const vm = this
      let params = {
        ...vm.params
      }
      params.state = vm.state
      if (vm.findInputValue) {
        if (vm.findInputValue.length > 11) {
          params.orderNo = vm.findInputValue
        } else {
          params.phone = vm.findInputValue
        }
      } else {
        delete params.goodsName
        delete params.orderNo
        delete params.phone
      }
      if (vm.orderType === 'stock') {
        FIND_STOCK_ORDER_PAGE_API(params, vm.currentPage, 10)
          .then(r => {
            if (r.data.code === '0') {
              let { isFirstPage, isLastPage, list } = r.data.data
              vm.printList(list, isFirstPage, isLastPage)
            } else {
              vm.$toast(r.data.message)
            }
          })
          .catch(e => {
            console.info(e)
          })
      } else if (vm.orderType === 'type') {
        // params.goodsKind = 'NORMAL'
        // params.shopId = vm.account.shopId
        params.providerId = vm.$store.state.account.providerId
        params.state = 1
        params.isShelf = '1'
        params.goodsTypeId = Number(vm.$cookie.get('choose-goods-type'))
        params.isShelfStock = '0'
        // isShelf = 1 // 上架
        delete params.isStock
        delete params.shopId

        FIND_SHOP_GOODS_PAGE(params, vm.currentPage, 10)
          .then(r => {
            if (r.data.code === '0') {
              let { isFirstPage, isLastPage, list } = r.data.data
              vm.printList(list, isFirstPage, isLastPage)
            } else {
              vm.$toast(r.data.message)
            }
          })
          .catch(e => {
            console.info(e)
          })
      } else {
        let obj = {
          providerId: vm.account.providerId,
          shopId: vm.account.shopId,
          state: vm.orderType === 'shop' ? '1' : '0'
        }
        if (vm.findInputValue) {
          obj.goodsName = vm.findInputValue
        } else {
          delete obj.goodsName
        }
        FIND_STOCK_GOODS_PAGE(obj, vm.currentPage, 10)
          .then(r => {
            if (r.data.code === '0') {
              let { isFirstPage, isLastPage, list, total } = r.data.data
              if (vm.orderType === 'shop') {
                wx.setNavigationBarTitle({
                  title: `我的商品(${total})`
                })
              }
              vm.printList(list, isFirstPage, isLastPage)
            } else {
              vm.$toast(r.data.message)
            }
          })
          .catch(e => {
            console.info(e)
          })
      }
    }, // 商品列表
    printList (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.list = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.alreadyLastPage = true
        vm.list.push(...list)
      } else {
        vm.list.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  background: #f6f8f9;
  > .addShopBox {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    background: #fff;
    font-size: 14px;
    color: #f24d38;
    p {
      width: 90%;
      margin: auto;
      text-align: right;
    }
  }
  > .seekBox {
    width: 100%;
    height: 50px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 14px;
    > .searchIcon {
      position: absolute;
      top: 50%;
      right: calc(100% - 300px + 100% - 300px / 2 + 15px);
      transform: translate(0, -50%);
    }
    > .findInput {
      width: 270px;
      border-radius: 25px;
      height: 30px;
      background: #f4f4f4;
      padding-left: 30px;
    }
  }
  .template1 {
    height: calc(100% - 42px - 50px);
  }
  .template2 {
    height: calc(100%);
  }
  > .scroll-wrap {
    // height: calc(100% - 42px - 50px);
    .wu {
      height: 15px;
    }
    .list {
      width: 100%;
      background: #fff;
      margin-bottom: 15px;
      .margin {
        width: 90%;
        margin: auto;
        display: flex;
        align-items: center;
        padding: 15px 0;
        img {
          width: 75px;
          height: 75px;
          border-radius: 6px;
        }
        .right {
          width: calc(100% - 75px - 15px);
          .stock {
            width: 100%;
            height: 75px;
            margin-left: 15px;
            font-size: 13px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            div {
              display: flex;
              align-items: center;
              justify-content: space-between;
              p {
                font-size: 14px;
                color: #000;
                font-weight: 600;
              }
              span {
                font-size: 12px;
                color: #f24d38;
              }
            }
            p {
              color: #999;
            }
          }
          .shop {
            width: 100%;
            height: 75px;
            margin-left: 15px;
            font-size: 13px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .shopName {
              font-size: 15px;
              color: #000;
            }
            div {
              display: flex;
              align-items: center;
              justify-content: space-between;
              span {
                font-size: 15px;
                color: #f24d38;
              }
            }
            .num {
              font-size: 13px;
              color: #999;
            }
          }
          .type {
            width: 100%;
            height: 75px;
            margin-left: 15px;
            font-size: 13px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .shopName {
              font-size: 15px;
              color: #000;
            }
            .num {
              font-size: 13px;
              color: #999;
            }
            div {
              display: flex;
              align-items: center;
              justify-content: space-between;
              span {
                font-size: 15px;
                color: #f24d38;
              }
              p {
                font-size: 14px;
                border-radius: 25px;
                color: #f24d38;
                border: 1px solid #f24d38;
                background: #fff;
                padding: 1px 7px;
              }
            }
          }
        }
      }
    }
    .end-tip {
      margin: 0;
      padding: 15px;
      text-align: center;
      color: $gray;
      font-size: 15px;
    }
  }
}
</style>
